import React, { useRef, FC, ReactElement } from "react";
import { Itodo } from "../typings";
import { Button } from "antd";

interface Iprops {
  addTodos: (todo: Itodo) => void;
  todoList: Itodo[];
}

const TdInput: FC<Iprops> = ({ addTodos, todoList }): ReactElement => {
  const inputRef = useRef<HTMLInputElement>(null);

  const addItem = (): void => {
    const val: string = inputRef.current!.value.trim();
    if (val.length) {
      const isExist = todoList.find((todo) => todo.content === val);
      if (isExist) {
        alert("已存在");
        return;
      }
      addTodos({
        id: new Date().getTime(),
        content: val,
        completed: false,
      });
      inputRef.current!.value = "";
    }
  };

  return (
    <div className="todo_input">
      <input type="text" ref={inputRef} placeholder="请输入。。。" />
      <Button type="primary" onClick={addItem}>
        增加
      </Button>
    </div>
  );
};
export default TdInput;
